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Deel 3 


De kneepjes van 
het vak 


Om echt comfortabel met een programma aan de slag te gaan, moet je naast de basisprinci- 


pes ook de kneepjes kennen die een applicatie net dat tikkeltje extra geven dat andere pro- 


gramma's ontberen. In deze laatste aflevering van de minicursus Fireworks leren we je al die 


tips en trucs. 


atuurlijk wil je zo precies mogelijk 
N werken als je tekeningen ontwerpt 

en om je daarbij te helpen biedt 
Fireworks een ingebouwd systeem van hulp- 
lijntjes. Je vindt ze in het menu View. Zet 
daar eerst een vinkje voor RULERS, waarna 
je heel precieze meetlatten ziet verschijnen 
boven en links van je documentvenster. Ga 
vervolgens in datzelfde menu naar GUIDES 
en vink in het submenu de opties SHow Gur- 
DES en SNAP TO GUIDES aan (Figuur 1). Nu 
kan je groene gidslijntjes uitzetten in je do- 
cument. Voor een horizontale lijn klik je in 
de bovenste ruler (meetlat) en sleep je van 
daaruit een groen lijntje naar je document- 
venster. Je kan het heel precies neerzetten 
als je de linkerruler in het oog houdt. Als 
een zwart maatstreepje verdwijnt, staat je 
gidslijntje precies op die plaats. Een verti- 
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Figuur 1 


caal gidslijntje zet je op dezelfde manier 
vanuit de linkerruler door daar te klikken 
en het naar rechts te slepen. Je kan zo de in- 
deling van je pagina heel nauwkeurig be- 
palen. 

Staat een lijntje fout? Geen probleem. Je 
klikt erop en je verschuift het. Staan ze een- 
maal goed, dan kan je er met de optie Lock 
GUIDES voor zorgen dat je ze niet per onge- 
luk verschuift. 
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kan. Ga opnieuw naar het menu View, zoek 
naar GRID en vink de opties SHOow GRID en 
SNAP TO GRID aan. Je ziet nu een rooster in 
je documentvenster, waarop je heel precies 
tekeningen, foto’s, tekst of figuren kan plaat- 
sen (Figuur 3). Standaard staat je grid op 36 
x 36 pixels, maar met de optie Epir GRID 
kan je ook dat aanpassen. 

Grids en Guides zijn hulplijntjes die je al- 
leen maar helpen om preciezer te werken. 
Ze worden dus niet mee bewaard met je do- 
cument als je dat opslaat. Je kan ze op elk 
moment aan- en uitzetten. 
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Figuur 2 


Als je nu met je tekengereedschap, bij- 
voorbeeld de RECTANGLE Toor werkt, kan je 
je rechthoeken heel precies uitlijnen. Om- 
dat je ook SNAP TO GUIDES hebt aangevinkt, 
hoef je zelfs niet eens zo precies te werken. 
Als je in de buurt van een gidslijntje klikt, 
begrijpt de Rectangle Tool dat je de gidslijn 
zelf bedoelt en je rechthoek staat dan pre- 
cies op de lijn (Figuur 2). 

Misschien werk je liever met een regelma- 
tig rooster (grid) op je werkblad. Ook dat 
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Figuur 3 
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Creatief vullen 


De simpele opvulfunctie uit onze toolbox 
kennen we natuurlijk al. Maar Fireworks 
zou Fireworks niet zijn als het daar niet 
mee kon goochelen. Via Fur (in het menu 
WiNpow) kan je namelijk allerhande ele- 
menten van die functie naar je hand zet- 
ten: een kleurtje, maar ook het patroon, 
het kleurverloop, de intensiteit en nog 
veel meer parameters (Figuur 4). Op die 
manier geef je simpele rechthoekjes het 
uitzicht van heuse knoppen, met reliëf, 
3D-effecten en kleurgradiënten. 
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Figuur 4 


Het aantal combinaties is eindeloos, want 
je kan voor elke keuze ook nog eens be- 
palen of de randen er hard of gevederd 
moeten uitzien (via EDGE) of een andere 
textuur moeten hebben. Je kan zelfs met 
een percentage aangeven hoe sterk dat 
weefsel zichtbaar moet zijn. Alleen al met 
de Fill-mogelijkheden kan je een hele dag 
lang experimenteren. Een paar voorbeel- 
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den geven je een heel beperkt idee van de 
mogelijkheden (Figuur 5). 

Het kan allemaal nog veel leuker, als je 
bijvoorbeeld aan je ontwerp ook nog een 
effectje toevoegt. Open daarvoor het ven- 
ster EFFECT via het WiNDow-menu en kies 
in het uitrolmenu welk effect je wil toe- 
passen. Er zijn er alweer een heleboel en 
sommige zijn moeilijk te omschrijven. Je 
kan dus beter zelf wat gaan experimen- 
teren. Je kan schaduwen leggen (DROP 
SHADOW, INNER SHADOW), reliëf (EMBOSS) 
of schuin aflopende randjes toevoegen 
(INNER BEVEL), kleuren doen vervagen 
(BLur) of de lichtinval bepalen in gebo- 
gen vlakken (Curves). En dat zijn nog 
maar een paar van de mogelijkheden. We 
hebben de vorige voorbeelden allemaal 
een effectje meegegeven om je een idee 
te geven (Figuur 6). 
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Figuur 6 


O ja, als je nadien een effect nog wil be- 
werken, selecteer dan eerst het object en 
klik dan in het venster EFFECTS op het info- 
symbooltje naast de naam van het effect 
(Figuur 7). 
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Naar de 
knoppen 


Ben je liever lui dan moe, dan kan Fireworks 
je de lastige klus van knoppen maken ook 
uit handen nemen. Teken daarvoor een 
rechthoek met je tekengereedschap. Selec- 
teer het object en bewaar het als een sym- 
bool (Vergeten wat dat is? Zie daarvoor de 
eerste aflevering van deze minicursus in 
Clickx 2) met de functietoets F8 of via het 
menu INSERT en CONVERT TO SYMBOL. Dan 
kan je het later zo vaak gebruiken als je wil, 
want met knoppen is dat doorgaans de be- 
doeling. In de SYMBOL PROPERTIES vul je een 
naam in voor je knop en zet je een bolletje 
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voor BUTTON (Figuur 8). Klik op OK en ga 
gauw kijken in het venster LIBRARY, want 
daar moet je symbool nu vermeld staan. Je 
ziet meteen ook hoe Fireworks een aantal 
‘slices’ heeft toegevoegd aan je knop en er 
ook een gedragshendeltje op heeft gezet (Fi- 
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Figuur 9 
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[Onion Skinning 
Instructions: 

Up state: the normal state of the button. Use the drawing and editing tools to create the Up state of the 

button. 
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GRAPHIC (2) (Figuur 12). Daarmee 
maak je een identieke knop aan als de- 
gene die je daarnet op het tabblad Up 
hebt gezien. Klik op die knop om hem 
te selecteren en open het venster FiLL. 
Kies daar een geschikte achtergrond- 
kleur en kleurverloop (wij kozen voor 
RADIAL en VIOLET, ORANGE). Klik dan 
op de tekst en kies ook hier een ge- 
paste kleur. Met de kleurhendel (3) kan 
je het kleurverloop aan je eigen smaak 
aanpassen. Je kan op dezelfde manier 
nog heel wat andere gedragingen voor 
de knop instellen, maar je kan ook de 
Button editor sluiten en het resultaat 
bekijken in het tabblad 2-Up, waar ont- 
werp en preview naast elkaar prijken 
(Figuur 13). Zodra je met de muis- 
aanwijzer over de knop glijdt, zie je de 
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Figuur 10 


guur 9). Vervolgens open je de BuTroN Epr- 
TOR door simpelweg op de knop te dubbel- 
klikken (Figuur ro). Selecteer nu in de tool- 
box de Texr Toor en klik ergens links op je 
knop. Daarmee wordt de gewone TExr Epr- 
TOR geopend. Tik daar de tekst voor de knop 
in en pas vervolgens het lettertype, de groot- 
te en de kleur aan (Figuur 11). 

Selecteer in de Button editor het tabblad 
OVER (1) en klik op de knop Cory up 
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BEHAVIORS kan je checken welke ge- 
dragingen al zijn ingesteld. 

Bij een knop hoort een link en die maak je 
via de Link WIZARD, onderaan in het tabblad 
OgjEcT (Figuur 14). In die wizard vul je het 
internetadres in en eventueel een alterna- 
tieve tekst en een tekst voor de statusbalk 
(Figuur 15). Op het tabblad ExePorrt SerTINGs 
kies je het best voor de EXPORT DEFAULTS, 
tenzij je alleen maar de knop zelf wil op- 
slaan zonder code. Je hebt dan de keuze uit 
diverse formaten. 
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[Button Symbol 


Instructions: 
Up state: the normal state of the button. Use the drawing and editing tools to create the Up state of the 
button. 
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Specify the URL to which this button will link when clicked. The 
pop-up menu lists recently-used URLs. Previous Í 


IF No URL (noHREF) is selected, the button will roll over but 
will not link to another web page. 


Specify an alternate test description of this button to display in 
the browser. 


Status Bar Test (Optional): 


hd 


IF desired, specify a message to display in the browser window 
status bar. 
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Op je stappen terugkeren 


Wie ontwerpt, maakt fouten. Nu kan je die 
fouten stuk voor stuk herstellen met de 
undo-functie die in vrijwel elk grafisch pro- 
gramma aanwezig is. Je vindt die in het 
menu Epit onder de optie UNDo, maar je 
kan het ook met de sneltoets CTRL+Z 
fiksen. 

Dat is echter klein bier in vergelijking met 
wat het HisTorY-venster je aan mogelijk- 
heden verschaft. Daar wordt namelijk een 
logboek bijgehouden van elke handeling die 
je in een bepaald documentvenster uitvoert. 
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Figuur 16 
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Zolang je het zaakje niet 
afgesloten hebt, kan je 
op elke handeling terug- 
komen door het schuif- 
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Edit Command List… 
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Panel Layout 

Reset Warning Dialogs 
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knopje links van het ven- 
ster naar boven te schui- 


ven. Je ziet ook meteen 
het resultaat in je docu- 
mentvenster (Figuur 16). 
In feite doet die functie 
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niets anders dan het tij- 
delijk bewaren van elke 
toestand waarin je werk- 
stuk zich bevindt. Na 
elke minuscule veran- 
dering slaat Fireworks 
een snapshot (foto) op 
van je werk. Je kan dus 
op elk moment naar elke 
toestand terugkeren. Let 
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Rectangle 


wel op: zodra je in een 
vorige toestand een ver- 
andering aanbrengt, gaan de latere stappen 
verloren. Je kan dus onbeperkt heen en weer 
schuiven en kijken wat goed is en wat niet, 
zolang je maar niets wijzigt. Dat zo’n ope- 
ratie behoorlijk wat geheugen slikt, spreekt 
vanzelf. Als je geheugen wat te krap wordt 
en je bent er zeker van dat je niet meer op 
je stappen terug wil keren, bewaar dan je 
werkstuk, sluit het af en open het opnieuw. 


Figuur 18 


Basispagina 
Als je vaak dezelfde handelingen moet uit- 
voeren, hoort dat geautomatiseerd te wor- 
den. Zo denken ze er althans 
over bij Fireworks en 

ze hebben geen on- 

gelijk. Stel dat je een 
aantal pagina’s moet 
maken met dezelfde basislay-out, 
wat geregeld voorkomt. Je maakt 
je ontwerp, zet wat guides uit en 
een kleurvlak dat telkens terug- 
komt, en gaat dan naar de His- 
TORY (Figuur 17). Daar zie je alle 
stappen staan die je hebt uitge- 
voerd. Selecteer de eerste, scroll 
dan naar beneden, druk de Surrr- 
knop in en selecteer de laatste 
stap. Alle stappen zijn nu gese- 
lecteerd. Klik vervolgens op de 
SAVE-knop onderaan rechts en vul 
in de dialoogbox een geschikte 

naam in, bijvoorbeeld BasisPA- 

GINA. Klik op OK en werk ge- 


[ Á 


we pagina wil beginnen met dezelfde ba- 
sislay-out, dan hoef je alleen maar naar het 
COMMANDS-menu te gaan en daar de optie 
BASISPAGINA aan te klikken. Meteen ver- 
schijnt je hele lay-out in het nieuwe docu- 
ment (Figuur 18). Als je nu naar het Histo- 
ry-venster kijkt, dan zie je daar COMMAND 
ScrIPT staan. Je hebt in feite een script ge- 
schreven dat je op elk moment kan uitvoe- 
ren. Je kan dit procédé in talloze situaties 
gebruiken om regelmatig terugkerende ta- 
ken uit te voeren. O ja, een eenmaal gemaakt 
commando kan je natuurlijk weer verwij- 
deren via het menu COMMANDS en de optie 
Eprr COMMAND LIST. 
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Figuur 17 
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Eindeloos zoeken en vervangen 


De zoekfunctie in Fireworks is een handig 
en veelzijdig instrument waarmee je aller- 
hande elementen kan opzoeken en vervan- 
gen door andere. Je kan zoeken in een do- 
cument, maar ook in een selectie of zelfs in 
een frame. Dat geldt natuurlijk voor een 
stukje tekst, maar even goed voor letterty- 
pes of stijlen. Ook een hyperlink kan je op 
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Figuur 19 


Zet je masker op 


Met behulp van maskers kan je foto’s uit- 
snijden, ze doen vervagen of er allerhande 
andere leuke effecten mee bereiken. Laten 
we even een heel eenvoudig voorbeeld ge- 
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die manier vervangen 
(Figuur 19). Je kan zelfs 
een stuk van zo’n link 
vervangen, wat erg han- 
dig kan zijn als een site, 
waarnaar je met talrij- 
ke links verwijst, bij een 
andere provider onder- 
dak vindt. Je hoeft dan 
alleen het gedeelte 
‘www.provider.be’ te 
vervangen. 

Het meest spectaculai- 
re is wellicht de ver- 
vanging van kleuren in 
afbeeldingen (Figuur 
20). Met je druppeltel- 
ler selecteer je de kleur 
in het Finp-kleuren- 
vakje en bij CHANGE TO 
kies je de nieuwe kleur. 
Eén druk op REPLACE 
ALL en je tekening ziet 
er helemaal anders uit. 


ven. We zetten alweer onze foto 
van de fiets op het canvas van een 
nieuw document en zien de bit- 
map verschijnen in het LAYERs-ven- 
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Figuur 21 
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ster (Figuur 21). Teken 
nu met het ROUNDED 
RECTANGLE TooL uit 
de toolbox een zwart 
vierkant met afgeron- 
de hoeken over de foto 
(Figuur 22). In het 
Layers-venster zie je 
beide afbeeldingen 
staan. Selecteer ze 
door ze een voor een 
aan te klikken met de 
SHiFT-knop _inge- 
drukt. Ze worden nu 
allebei blauw. Ga naar 
het menu Moprry, 
kies MASK en vervol- 
gens GROUP As MASK. 
Terwijl beide afbeel- 
dingen naast elkaar 
komen te staan in het 
Layers-venster, zie je 
in het documentven- 
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Om in schoonheid te eindigen, voegen we 
aan de voorgaande illustratie nog een scha- 
duwpartij toe. Selecteer daarvoor de af- 
beelding en open het venster EFFECT. In 
het menu selecteer je SHADOW AND GLOW 
en vervolgens DROP SHADOW. Je ziet met- 
een een schaduw verschijnen rond de foto, 
maar je kan die nog aanpassen (Figuur 


5 mn: 26). Als het eigenschappenkadertje niet 
en me n Figuur 25 zichtbaar is, klik je op het INFo-knopje (de 


zi letter 1’). Je kan nu verschillende para- 
nieuw dezelfde procedure toepast - meters instellen, zoals de afstand in pixels 
beide afbeeldingen selecteren in het waarover de schaduw verschoven moet 
Layers-venster en GROUP As MASK toe- worden, de kleur van de schaduw, het 
passen — dan zie je in de PREvIEW-mo- doorzichtigheidpercentage (opacity), de 
dus dat de foto zachte randen heeft ge- gradatie van schaduw en de hoek waaruit 
kregen (Figuur 25). Beeldig, niet? het licht dat deze schaduw creëert, van- 
daan komt. De meest natuurlijke invals- 
hoek is 315°, het licht komt dan van links- 
boven. Maar je kan ook 180° kiezen om 
een griezeleffect te bekomen. Zorg er dan 
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ster het resultaat. De foto is lolxl 


mooi uitgesneden met afge- 
ronde hoeken, precies vol- 


gens de lijntjes van de afge- 
ronde rechthoek (Figuur 23). 


wel voor dat alle elementen op eenzelfde 
pagina vanuit eenzelfde richting belicht 
worden. Anders lijkt het maar een zootje. 

— Willy Schuyesmans — 


Kijk ook even in het Ogjecr- 
venster (terwijl de afbeelding 
van de rechthoek geselecteerd 
is in het Layers-venster) en 
stel daar de optie PATH Our- 
LINE in. De foto ziet er nu heel 
mooi uit, wat je in de PRE- 
VIEW-stand kan controleren. 

Maar het kan nog mooier. Als 
je ook nog de eigenschappen 
van het masker instelt op het 
Fir-venster, kan je nog leu- 
kere effecten bereiken. Se- 
lecteer daar Soup, kies bij 
EDGE voor FEATHER en stel die 
in op 15 of daaromtrent. Het 
masker vervaagt nu aan de 
randen (Figuur 24). Als je op- 
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Denk vooral niet dat je nu alles weet over Fireworks. Het program- 
ma heeft zoveel mogelijkheden dat je nog een hele tijd kan bijleren. 
Dat kan ook on line, op één van de onderstaande pagina’s. Tot onze 
spijt konden we er geen vinden in het Nederlands. 


Macromedia Fireworks Support Center 
[ www.macromedia.com/support/fireworks/ | 


Macromedia Fireworks Book & Tutorials 
[ http://epaperpress.com/fireworks/ | 


One-Day Fireworks Tutorial 
[ http://hotwired.lycos.com/webmonkey/98/30/index2a.html ] 
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Macromedia Fireworks Resources 
[ http://graphicssoft.about.com/cs/fireworks/ | 


Fireworks Animation Tutorials 
[ http://graphicssoft.about.com/cs/fireworksanimation/ | 


Fireworks Tutorials for Image Effects 
[ http://graphicssoft.about.com/cs/fireworkseffects/ | 


Training Tools for Fireworks 
[ www.shambles.net/webpages/schoolcomm/Fireworks/ | 


Using Macromedia Fireworks 
[ http://nmc.northwestern.edu/learning/traintrainer/fireworks.html | 


